<template>
  <div id="manageID" class="management same-change-oldstyle" >
    <div class="same-head-box" style="border-bottom:0px">
			<div class="saem-seat-box" >
				<div class="saem-seat-left">
					<span>当前位置：</span>
                     <el-breadcrumb separator-class="el-icon-arrow-right">
					              <el-breadcrumb-item>园区管理</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/communityList' }">园区</el-breadcrumb-item>
                        <el-breadcrumb-item>经营设置</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<button class="same-search-btns" @click="returnBack">返回</button>
				</div>
			</div>
    </div>
    <div class="edit-box">
      <div class="edit-top-box">
          <img src="../../../static/images/oC-icon3.png" width="15px"/> 经营设置
      </div>
      <div class="edit-body-box">

        <div class="edit-list-box">
          <div class="label-box">区域码</div>
          <div class="edit-cont-box">
            <div class="edit-one">
                <el-select v-model="area_code_id" placeholder="请选择区域码" @change="changeAreaCode" class='ipts' size="medium">
                  <el-option v-for="item in areaCodeList" :key="item.id" :label="item.area_code" :value="item.id" :disabled="item.is_frozen==-1">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.area_code }}</span>
                  </el-option>
                </el-select>
                <div @click="addAreaCode()" class="ml-10 addOtherbtn" >新增区域码</div>
            </div>
            
            <i class="i-show">*</i>
          </div>
        </div>

        <div class="edit-list-box">
          <div class="label-box">备案检查</div>
          <div class="edit-cont-box">
            <div class="edit-one">
                <el-switch
                  v-model="check_card_record"
                  size="medium"
                  active-color="#2c5586"
                  inactive-color="#CCCCCC">
                </el-switch>
                <div class="edit-comit">{{check_card_record?'开':'关'}}</div> 
                <el-date-picker v-if="check_card_record" v-model="check_record_card_time" style="width:283px" type="date" value-format="yyyy-MM-dd" placeholder="选择开启日期">
                </el-date-picker>
              </div>
            <span class="span-hint">开启：水卡在设备上刷卡时不会自动进行入库和开卡操作，若水卡未入库此时会自动挂失，请谨慎操作! <br> 关闭：水卡在设备上刷卡时将自动入库和开卡</span>
            <i class="i-show" v-if="check_card_record">*</i>
          </div>
        </div>

        <div class="edit-list-box">
          <div class="label-box">水卡阈值金额</div>
          <div class="edit-cont-box">
            <div class="edit-one">
                <el-input size="medium" v-model="threshold_value" placeholder="请输入水卡阈值金额" style="width: 360px;" ></el-input>
            </div>
            <i class="i-show">*</i>
          </div>
        </div>
        <div class="edit-list-box">
          <div class="label-box">水卡阈值金额开关</div>
          <div class="edit-cont-box">
            <div class="edit-one">
                <el-switch
                  size="medium"
                  v-model="threshold_on"
                  active-color="#2c5586"
                  inactive-color="#CCCCCC">
                </el-switch>
                <div class="edit-comit">{{threshold_on?'开':'关'}}</div> 
            </div>
            <span class="span-hint">开启时，水卡余额低于阈值时提醒用户</span>
            <i class="i-show"></i>
          </div>
        </div>

        <div class="edit-list-box">
          <div class="label-box">水卡低余额比例提醒</div>
          <div class="edit-cont-box">
            <div class="edit-one">
                <el-switch
                  v-model="prompt_on"
                  active-color="#2c5586"
                  inactive-color="#CCCCCC">
                </el-switch>
                <div class="edit-comit">{{prompt_on?'开':'关'}}</div> 
                 <el-input size="medium" v-model="prompt_value" placeholder="请输入低余额水卡比例(小于100整数)" style="width: 250px;margin-right:10px"></el-input> %
              </div>
            <span class="span-hint">开启时，水卡低余额（余额小于阈值金额）比例大于设定值时提醒经营者</span>
            <i class="i-show">*</i>
          </div>
        </div>
        <div class="edit-list-box">
          <div class="label-box">价格模板</div>
          <div class="edit-cont-box">
            <div class="edit-one">
              <div class="temp-box">
                <el-select placeholder="请选择价格模板" @change="changeOnlineWaterTemplate" v-model="online_template_title"  class='ipts' size="medium">
                  <el-option v-for="(item,index) in onlineTemplateList" :key="item.id" :label="item.overdue?item.template_title+'(已过期)':item.template_title" :disabled="item.overdue"
                    :value="index"></el-option>
                </el-select>
                <div class="temp-list">
                  <template v-if="online_template_title!==''">
                    <div class="cell" v-for="(item,key,i) in onlineTemplate" :key="key">
                      <span>配置{{i+1}}</span>
                      <span>打水量：{{item.rise}}L</span>
                      <span>金额：{{item.money}}元</span>
                    </div>
                    <div class="date" v-if="onlineTemplate.length>0">
                      <template v-if="data.sell_template_type==1">
                        有效日期:{{data.sell_start_time}}至{{data.sell_end_time}}
                      </template>
                      <template v-else>
                        有效日期:永久使用
                      </template>
                    </div>
                    <div v-if="data.sell_water_delete == '是'" class="is-del">该模版已被删除</div>
                  </template>
                </div>
              </div>
              <div @click="onlineTemplateFun()" class="ml-10 addOtherbtn" >新增价格模板</div>
            </div>
            <i class="i-show">*</i>
          </div>
        </div>
        <div class="edit-list-box">
          <div class="label-box">用户自助充值模板 </div>
          <div class="edit-cont-box">
            <div class="edit-one">
                <div class="temp-box">
                  <el-select placeholder="请选择用户自助充值模板" @change="changeRechargeTemplate" v-model="recharge_template_title"   class='ipts' size="medium">
                    <el-option v-for="(item,index) in rechargeTemplateList" :key="item.id" :label="item.overdue?item.template_title+'(已过期)':item.template_title" :disabled="item.overdue"
                      :value="index"></el-option>
                  </el-select>
                  <div class="temp-list">
                    <template v-if="recharge_template_title!==''">
                      <div class="cell" v-for="(item,key) in rechargeTemplate" :key="key">
                        <span>充值金额：{{item.recharge}}元</span>
                        <span>赠送金额：{{item.give}}元</span>
                      </div>
                      <div class="date" v-if="rechargeTemplate.length>0">
                        <template v-if="data.template_type==1">
                          有效日期:{{data.start_time}}至{{data.end_time}}
                        </template>
                        <template v-else>
                          有效日期:永久使用
                        </template>
                      </div>
                      <div v-if="data.is_delete == '是'" class="is-del">该模版已被删除</div>
                    </template>
                  </div>
                </div>
                <div @click="addUserTemplate()" class="ml-10 addOtherbtn" >新增自助充值模板</div>
            </div>
            <i class="i-show">*</i>
          </div>
        </div>
      </div>
      <div class="bind" @click="bind">保存</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "management",
    data() {
      return {
        village_id:'',
        onlineTemplateList: [],//所有打水模板
        onlineTemplate: [],//当前选中的打水模板
        online_template_id: "",
        online_template_title: "",

        rechargeTemplateList: [],//所有充值模板
        rechargeTemplate: [],//当前选中的充值模板
        recharge_template_id: "",
        recharge_template_title: "",
        data: {},
        area_code_id: "",//当前选中的区域码id
        areaCodeList: [],
        check_card_record: true,
        threshold_on: true,
        threshold_value: '',
        prompt_on: true,
        prompt_value: '',
        check_record_card_time: "",
      };
    },
    //生命周期钩子函数
    created: function () {
      this.active = this.$route.path;
      this.village_id = this.$route.query.id;
      this.getVillage();
    },
    inject: [
      'reload'
      ],
          //进入之前
    beforeRouteEnter(to, from, next) {
       to.meta.keepAlive = true;
			 next(vm => {
        
         //新增的区域码id  to.meta.areacodes_id
          var areacodes_id=to.meta.areacodes_id?to.meta.areacodes_id:'';
           if(from.query.is_areacode==1&&areacodes_id){
                vm.getAreaCode(areacodes_id);//重新获取区域码列表
           }
           // console.log('取到的值>>>>>',from.query.is_device,to.meta.template_id)
           //新增的打水模板id to.meta.template_id
           var template_id=to.meta.template_id?to.meta.template_id:'';
           if(from.query.is_device==1&&template_id){
                vm.getOnlineWaterTemplate(template_id);//重新获取打水模板
           }
            //新增的用户自助充值模板id to.meta.tplRechange_id
            //console.log('取到的值22222>>>>>',from.query.is_device,to.meta.tplRechange_id)
           var tplRechange_id=to.meta.tplRechange_id?to.meta.tplRechange_id:'';
           if(from.query.is_device==1&&tplRechange_id){
                vm.getReachargeTemplate(tplRechange_id);
           }
      })
    },
    //离开之前
		beforeRouteLeave(to, from, next) {
			let updates = ["/onlineTemplate", "/areaCodeAdd","/userTemplate"];
			if (updates.includes(to.path)) {
        from.meta.keepAlive = true;
			} else {
				from.meta.keepAlive = false;
      }
      //console.log('from',this.areacodes_id,from.path,from.meta)
      //console.log('to',this.areacodes_id,to.path,to.meta)
			next();
		},
    methods: {
      RefreshFun(){
          // 调用reload方法，刷新整个页面
          this.reload()
      },
      //返回
      returnBack(){
          this.$router.back(-1);
      },
      changeAreaCode(e) {
        this.area_code_id = e;
      },

      //获取区域码
      getAreaCode(id) {
        this.$post({
          url: "Partner/CardMother/cardMotherList",
          success: res => {
            if (res.code == 1000) {
              const data = res.data.data;
              this.areaCodeList = data;
              data.forEach((v, k) => {
                if(id==v.id){
                  this.area_code_id=v.area_code;
                }
              });
              // console.log(data);
            } else {
              // this.$message.error(res.message);
            }
          }, error: e => {
            this.$message.error("获取区域码失败");
          }
        })
      },


      getVillage() {
        this.$post({
          url: 'Partner/Village/getVillage',
          data: {
            id: this.village_id
          },
          success: (data) => {
            console.log(data);
            if (data.code == 1000) {
              this.online_template_title = data.data.sell_water_title?data.data.sell_water_title:'通用模板';
              this.online_template_id = data.data.sell_id;
              this.recharge_template_title = data.data.template_title?data.data.template_title:'通用模板';
              this.recharge_template_id = data.data.template_id;
              this.onlineTemplate = data.data.sell_template;
              this.rechargeTemplate = data.data.template;
              // this.area_code_id = data.data.area_code_id;
              this.check_card_record = parseInt(data.data.check_record_card)==1?true:false;
              this.threshold_on = parseInt(data.data.threshold_on)==1?true:false;
              this.threshold_value = data.data.threshold_value;
              this.prompt_on = parseInt(data.data.prompt_on)==1?true:false;
              this.prompt_value = data.data.prompt_value;
              this.check_record_card_time = data.data.check_record_card_time;
              this.data = data.data;
              this.getAreaCode(data.data.area_code_id);
              this.getReachargeTemplate(this.recharge_template_id);//获取充值模板
              this.getOnlineWaterTemplate(this.online_template_id);//打水模板
            } else {
              this.$message.error(data.message);
            }
          }
        })
      },

      changeOnlineWaterTemplate(e) {
        this.onlineTemplate = this.onlineTemplateList[e].template;
        this.online_template_title = this.onlineTemplateList[e].template_title
        this.online_template_id = this.onlineTemplateList[e].id
        this.data.sell_start_time = this.onlineTemplateList[e].start_time;
        this.data.sell_end_time = this.onlineTemplateList[e].end_time;
        this.data.sell_template_type = this.onlineTemplateList[e].template_type;
        this.data.sell_water_delete = this.onlineTemplateList[e].is_delete;
      },

      changeRechargeTemplate(e) {

        this.data.start_time = this.rechargeTemplateList[e].start_time;
        this.data.end_time = this.rechargeTemplateList[e].end_time;
        this.data.is_delete = this.rechargeTemplateList[e].is_delete;
        this.data.template_type = this.rechargeTemplateList[e].template_type;
        this.recharge_template_id = this.rechargeTemplateList[e].id;
        this.rechargeTemplate = this.rechargeTemplateList[e].template;
        this.recharge_template_title = this.rechargeTemplateList[e].template_title;
      },

      //获取线上打水模板
      getOnlineWaterTemplate(tlpid='') {
        this.$post({
          url: "Partner/Village/templateList",
          data: {
            template_species: 2,
            row: 100
          },
          success: data => {
            if (data.code == 1000) {
              this.onlineTemplateList=[];
              data.data.data.forEach((v, k) => {
                if (v.template_status == 1 ) {
                  this.onlineTemplateList.push(v);
                }
                if(v.id==tlpid){
                      //保持和原来一致(不动原来的)
                      this.onlineTemplate = v.template;
                      this.online_template_title = v.template_title
                      this.online_template_id = v.id
                      this.data.sell_start_time = v.start_time;
                      this.data.sell_end_time =v.end_time;
                      this.data.sell_template_type = v.template_type;
                      this.data.sell_water_delete = v.is_delete;
                }
              });

            } else {
              this.$message.error(data.message);
            }
          }
        });
      },
      bind() {
        this.$post({
          url: "Partner/Village/bindTemplate",
          data: {
            check_card_record: this.check_card_record==true?1:2,
            check_record_card_time: this.check_record_card_time,
            village_id: this.village_id,
            template_id: this.recharge_template_id,
            set_template_id: this.online_template_id,
            area_code_id: this.area_code_id,
            threshold_on: this.threshold_on==true?1:2,
            threshold_value: this.threshold_value,
            prompt_on: this.prompt_on==true?1:2,
            prompt_value: this.prompt_value
          }, success: res => {
            if (res.code == 1000) {
              this.$message.success(res.message);
              setTimeout(() => {
                this.$router.push({ path: '/communityList' })
              }, 2000);
            } else {
              this.$message.error(res.message);
            }
          }
        })
      },

      //获取用户充值模板
      getReachargeTemplate(tlpRcid='') {
        this.$post({
          url: "Partner/Village/templateList",
          data: {
            template_species: 1,
            row: 100
          },
          success: data => {
            if (data.code == 1000) {
              this.rechargeTemplateList=[];
              data.data.data.forEach((v, k) => {
                if (v.template_status == 1) {
                  this.rechargeTemplateList.push(v);
                }
                if(tlpRcid==v.id){
                    this.data.start_time = v.start_time;
                    this.data.end_time = v.end_time;
                    this.data.is_delete = v.is_delete;
                    this.data.template_type = v.template_type;
                    this.recharge_template_id = v.id;
                    this.rechargeTemplate = v.template;
                    this.recharge_template_title = v.template_title;
                }
              });
            } else {
              this.$message.error(data.message);
            }
          }
        });
      },
      //快捷添加区域码
      addAreaCode(){
        this.$router.push({ path: '/areaCodeAdd', query: { is_areacode: 1 } });
      },
       //快捷添加打水模板
      onlineTemplateFun(){
        this.$router.push({ path: '/priceTemplateAdd', query: { is_device: 1 } });//is_device=1  保持和添加设备一致 
      },
      //快速添加自助充值模板
      addUserTemplate(){
        this.$router.push({ path: '/userTemplateAdd', query: { is_device: 1 } });  
      } 
    }
  };
</script>
<style >
#manageID .ipts {
    width: 100%;
    display: flex;
    position: relative;
    flex: 1;
  }
#manageID .edit-box{
  width: 100%;
  border-top: 20px solid #FAFAFA;
  padding-bottom: 22px;
}
#manageID .edit-top-box{
  width: 100%;
  padding: 28px 30px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 500;
  color: #2D5686;
}
#manageID .edit-top-box img{
  width: 15px;
  margin-right: 10px;  
}
#manageID .edit-body-box{
  width:100%;
  padding: 0px 57px 0px 27px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
#manageID .edit-list-box{
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 40px;
}
#manageID .label-box{
  width: 136px;
  margin-right: 10px;
  line-height: 36px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #4C4C4C;
  text-align: right;
  /* text-align: justify;
  text-align-last:justify;
  text-justify:distribute-all-lines; */
}
#manageID .edit-cont-box{
  position: relative;
  min-width:360px;
}
#manageID .edit-cont-box .i-show{
  position: absolute;
  top: 10px;
  right: -15px;
  font-style: normal;
  color: #FF6565;
}
#manageID .span-hint{
  position: absolute;
  left: 0px;
  font-size: 12px;
  font-weight: 400;
  color: #B3B3B3;
  width:360px;
  flex-wrap: wrap;
}
#manageID .edit-one{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}
#manageID .temp-box{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}
#manageID .edit-comit{
  position: relative;
  min-width: 20px;
  padding: 0 8px;
}

  #manageID .temp-list {
    width: 300px;
    position: absolute;
    box-sizing: border-box;
    top: 40px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 3px 8px 0px #E6E6E6;
  }
  #manageID .temp-list2 {
    position: relative;
  }

  #manageID .cell:first-child {
    padding-top: 10px;
  }

  #manageID .cell {
    display: flex;
    justify-content: space-between;
    background: #EDF6FF;
    padding: 0px 25px 10px;
    font-size: 13px;
  }

  #manageID  .date {
    text-align: center;
    background: #F8FBFF;
    padding: 5px;
    box-sizing: border-box;
  }

  #manageID .bind {
    margin: 170px 0px 0px 57px;
    box-sizing: border-box;
    background: #2C5487;
    font-size: 18px;
    width: 100px;
    color: #fff;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-radius: 6px;
    cursor: pointer;
  }

  #manageID  .is-del {
    text-align: center;
    color: #FF6565;
    padding-bottom: 10px;
    background: #F8FBFF;
  }
  /* #manageID .el-input--suffix .el-input__inner{
    height: 40px!important;
  }
  #manageID .el-input--suffix .el-input__inner {
    height: 40px!important;
  }
  #manageID .el-input--small .el-input__inner{
    height: 40px!important;
  } */

#manageID .addOtherbtn{
  cursor: pointer;
  color: #2C5586;
  font-size: 12px;
}

#manageID  .ml-10 {
    margin-left: 10px;
  }


</style>
